<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=640,user-scalable=no" />
		<title>生成喜宴</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/createBanquet.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<script type="text/javascript">
			var datalist = [[{},{},{}],[],[]]
			arr = [{
					"id": "第1位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第2位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第3位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第4位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第5位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第6位",
					"name": "sss",
					"url": "./images/0.jpg"
				}]
			datalist.push(arr);
			var jsonDataObj = [
				[{
					"id": "第1位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第2位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第3位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第4位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第5位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第6位",
					"name": "sss",
					"url": "./images/0.jpg"
				}],
				[{
					"id": "第1位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第2位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第3位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第4位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第5位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第6位",
					"name": "sss",
					"url": "./images/0.jpg"
				} ],
				[{
					"id": "第1位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第2位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第3位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第4位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第5位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第6位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, ],
				[{
					"id": "第1位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第2位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第3位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第4位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第5位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第6位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, ],
				[{
					"id": "第1位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第2位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第3位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第4位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第5位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, {
					"id": "第6位",
					"name": "sss",
					"url": "./images/0.jpg"
				}, ],
//				[{
//					"id": "第1位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第2位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第3位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第4位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第5位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第6位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, ],
//				[{
//					"id": "第1位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第2位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第3位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第4位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第5位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第6位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, ],
//				[{
//					"id": "第1位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第2位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第3位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第4位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第5位",
//					"name": "sss",
//					"url": "./images/0.jpg"
//				}, {
//					"id": "第6位",
//					"name": "sss",
//					"url": "images/seated_bg.png"
//				}, ],

			];
			var userUrl = {
				"name": "宝哥哥",
				"url": "images/get_back.png"
			};
		</script>
	</head>

	<body>
		<div class="web">
			<!--**************改动**************start-->
			<audio src="music/1.mp3" autoplay loop=""></audio>
			<div class="music xuanzhuan"></div>
			<!--**************改动**************end-->

			<!--页面进入时触发的遮罩-->
			<div class="welcome">
				<!--第一个首页生成宴席时的欢迎语-->
				<div class="animated bounceIn">
					囍宴摆好了,<br />快邀请亲朋好友入席!
					<div class="remove"><img src="images/close_icon.jpg"/></div>
				</div>
				<!--第二个首页朋友进入席位时的欢迎语,默认隐藏,专属样式名字为.btns_f-->
				<div class="btns btns_f animated bounceIn">
					欢迎来到<input type="text" />的宴席<br />
					<button>我要入席</button><br />
					<button>查看宴席排行榜</button><br />
					<button>我要制作我的宴席</button><br />
					<div class="remove"><img src="images/close_icon.jpg"/></div>
				</div>
				<!--第三个首页我要入榜时的欢迎语,默认隐藏,专属样式名字为.btns_s-->
				<div class="btns btns_s animated bounceIn">
					欢迎来到<input type="text" />的宴席<br /><br />
					<button>我要入榜,<br />赢取999元现金</button><br /><br />
					<button>查看宴席排行榜</button><br />
					<div class="remove"><img src="images/close_icon.jpg"/></div>
				</div>
				<!--第四个首页我要入榜时的欢迎语,默认隐藏-->
				<div class="btns btns_t animated bounceIn">
					为Ta收集更多新婚祝福!
					<div class="remove"><img src="images/close_icon.jpg"/></div>
				</div>
				
				<!--平时弹出来使用输出信息的-->
				<div class="btns btns_alert animated bounceIn">
					<div>这就是信息</div>
					<div class="remove"><img src="images/close_icon.jpg"/></div>
				</div>
				
			</div>
			<!--页面正文标题部分-->
			<!--第二,三首页进入时标题内容隐藏,但为防止中间桌子的内容部分顶到顶部,请给.title设置30px的高度-->
			<div class="title">
				<span>宝哥哥</span><span>家的囍宴</span>
			</div>
			<!--页面正文的桌子部分-->
			<div class="content">
				<div class="desk desk_b" data-index=0>
					<div class="cencir">
						<p>主宾桌</p>
					</div>
					<div class="seat seat1 " data-index=0>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat2 " data-index=1>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat3  " data-index=2>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat4 " data-index=3>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat5 " data-index=4>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat6" data-index=5>
						<img src="images/seated_bg.png" />
					</div>
				</div>

				<div class="desk desk_s" data-index=1>
					<div class="cencir">
						<p>第1席</p>
					</div>
					<div class="seat seat1 " data-index=0>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat2" data-index=1>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat3" data-index=2>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat4" data-index=3>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat5" data-index=4>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat6" data-index=5>
						<img src="images/seated_bg.png" />
					</div>
				</div>

				<div class="desk desk_s" data-index=2>
					<div class="cencir">
						<p>第2席</p>
					</div>
					<div class="seat seat1" data-index=0>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat2" data-index=1>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat3" data-index=2>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat4" data-index=3>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat5" data-index=4>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat6" data-index=5>
						<img src="images/seated_bg.png" />
					</div>
				</div>

				<div class="desk desk_s" data-index=3>
					<div class="cencir">
						<p>第3席</p>
					</div>
					<div class="seat seat1" data-index=0>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat2" data-index=1>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat3" data-index=2>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat4" data-index=3>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat5" data-index=4>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat6" data-index=5>
						<img src="images/seated_bg.png" />
					</div>
				</div>

				<div class="desk desk_s" data-index=4>
					<div class="cencir">
						<p>第4席</p>
					</div>
					<div class="seat seat1" data-index=0>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat2" data-index=1>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat3" data-index=2>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat4" data-index=3>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat5" data-index=4>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat6" data-index=5>
						<img src="images/seated_bg.png" />
					</div>
				</div>

				<div class="desk desk_s" data-index=5>
					<div class="cencir">
						<p>第5席</p>
					</div>
					<div class="seat seat1" data-index=0>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat2" data-index=1>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat3" data-index=2>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat4" data-index=3>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat  seat5" data-index=4>
						<img src="images/seated_bg.png" />
					</div>
					<div class="seat seat6" data-index=5>
						<img src="images/seated_bg.png" />
					</div>
				</div>

				<!--!!!!!!!!!!!把左后一桌的图片给去掉,防止混乱-->
				<div class="desk desk_s desk_jia" data-index=6>
					<div class="cencir">
						<p>+</p>
					</div>
					<div class="seat seat1" data-index=0>
						<!--<img src="images/seated_bg.png"/>-->
					</div>
					<div class="seat seat2" data-index=1>
						<!--<img src="images/seated_bg.png"  />-->
					</div>
					<div class="seat  seat3" data-index=2>
						<!--<img src="images/seated_bg.png"  />-->
					</div>
					<div class="seat  seat4" data-index=3>
						<!--<img src="images/seated_bg.png"  />-->
					</div>
					<div class="seat  seat5" data-index=4>
						<!--<img src="images/seated_bg.png"  />-->
					</div>
					<div class="seat seat6" data-index=5>
						<!--<img src="images/seated_bg.png"  />-->
					</div>
				</div>

			</div>

			<!--页面正文尾部-->
			<div class="footer">
				<!--第一个首页的底部-->
				<div class="btn button">
					生成囍宴,分享囍事
				</div>
				<!--第二/三个首页的脚步,默认为display:none-->
				<div class="btns_f">
					您是第<input type="text" />位宾客,目前已有<input type="text" />位宾客入席
				</div>
			</div>

			<!--桌子切换变大时动态的页脚内容-->
			<div class="mask">
				<p>您已成功入席</p>
				您的座位是<span class="fa_pos">-</span>桌 第
				<span class="sel_pos">-</span>位
			</div>
		
			<div id="canvas"></div>
		</div>
		<!--返回首页-->
		<div class="bot">
			<button></button>
		</div>


		<!--********改动   START************-->
		
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/lufylegend-1.10.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/plugin.js" type="text/javascript" charset="utf-8"></script>
		


		<script type="text/javascript">
			var loadData = [{
				name: "sugar",
				path: "images/sugar.png"
			}] 
			var dw =640,dh=1136,dataList,sugarArr=[],time;
			init(1000 / 40, "canvas", dw, dh, function() {
				if(LGlobal.mobile) {
					LGlobal.stageScale = LStageScaleMode.FIXED_WIDTH;
					LGlobal.fixedMode = LStageScaleMode.FIXED_MODE_TOP;
				} else {
					LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
				}
				LSystem.screen(LStage.FULL_SCREEN);
//				LMouseEventContainer.set(LMouseEvent.MOUSE_DOWN, true);
				LLoadManage.load(loadData, function(progress) {
				}, function(result){
					dataList = result;
					var stageLayer = new LSprite();
					stageLayer.addEventListener(LEvent.ENTER_FRAME, gameLoop.bind(stageLayer));
					time = setInterval(function(){
						for(var i=0;i<5;i++){
							var Sprite =new LBitmap(new LBitmapData(dataList['sugar']));
							this.addChild(Sprite);
							Sprite.x = Math.random()*1000-200;
							Sprite.y = Math.random()*-300-40;
							Sprite.rotate =  Math.random()*100;
							sugarArr.push(Sprite);
							
						}
					},500);
					addChild(stageLayer);
				});
			});
			function gameLoop(){
				for(var i=0;i<sugarArr.length;i++){
					sugarArr[i].y+=10;
					sugarArr[i].x +=Math.random()*3;
					sugarArr[i].alpha-=Math.random()*10;
					sugarArr[i].rotate +=  Math.random()*2;
				}
				
				if(sugarArr.length>=35){
					clearInterval(time);
					$("#canvas").transition({opacity:0},1000,function(){
						$(this).remove()
					})
					
				}
				
			}
			
		</script>
		<!--********改动   end************-->
		
		
		
		
		<script src="js/desk.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//第一个首页的欢迎窗口弹出按钮
			$(".bot button").on("touchstart", function() {
					location.href = "index_1_Home.html";
				})
				//第二个首页的欢迎窗口弹出按钮
			$(".btns_f button:first").on("touchstart", function() {
				//修改过,remove
				$(".welcome").css("display", "none");
			})
			$(".btns_f button:nth-of-type(2)").on("touchstart", function() {
				location.href = "Ranking.html"
			})
			$(".btns_f button:nth-of-type(3)").on("touchstart", function() {
					location.href = "index_1_Home.html"
				})
				//第三个首页的欢迎窗口弹出按钮	
			$(".btns_s button:nth-of-type(1)").on("touchstart", function() {
				location.href = "Information.html";
			})
			$(".btns_s button:nth-of-type(2)").on("touchstart", function() {
					location.href = "Ranking.html"
				})
				//第一个首页底部的链接弹出	
			$(".footer .btn").on("touchstart", function() {
				//			alert(11)
				$(".welcome").css("display", "block");
				$(".btns_t").css("display", "block").siblings().css("display", "none");
			})
		</script>
		<!--**************改动**************start-->

		<script type="text/javascript">
			function showwel(n,msg) {
				$(".welcome").css("display", "block");
				//第一个首页欢迎语出现,第二三个欢迎隐藏
				if(n == 1) {
					$(".welcome div:first").css("display", "block");
					$(".btns_f").css("display", "none");
					$(".btns_s").css("display", "none");
					$(".btns_t").css("display", "none");
					$(".btns_alert").css("display", "none");
					
				};
				//第二个首页欢迎语出现,第一三个欢迎隐藏
				if(n == 2) {
					$(".welcome div:first").css("display", "none");
					$(".btns_s").css("display", "none");
					$(".btns_f").css("display", "block");
					$(".btns_t").css("display", "none");
					$(".btns_alert").css("display", "none");
					
				};
				//第三个首页欢迎语出现,第一二个欢迎隐藏
				if(n == 3) {
					$(".welcome div:first").css("display", "none");
					$(".btns_t").css("display", "none");
					$(".btns_s").css("display", "block");
					$(".btns_f").css("display", "none");
					$(".btns_alert").css("display", "none");
				}
				if(n==5){
					$(".btns_alert div:first-child").html(msg);
					$(".welcome div:first").css("display", "none");
					$(".btns_t").css("display", "none");
					$(".btns_s").css("display", "none");
					$(".btns_f").css("display", "none");
					$(".btns_alert").css("display", "block");
					
				}
			}
			showwel(3);
			function seatClickFun(e) {
				//!!!!!!!!!!!!!!!!移除未坐座位的动画
				$(this).removeClass("animated").siblings().addClass("animated");
				alert(123);
				return false;
			}

			var mu = $(".music");
			var music = $("audio")[0];
			mu.on("touchstart",function() {
				mu.toggleClass("xuanzhuan");
				if(music.paused == false) {
					music.pause();
				} else {
					music.play();
				}
			})
		</script>
		<!--**************改动**************end-->

	</body>

</html>